<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="interval">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Daily Temperatures in Boston</title>
  <style type="text/css">
    #canvas {
      position: relative;
      /*width: 1400px;*/
      margin: 15px auto 0;
    }
    #canvas .title {
      position: absolute;
      top: 0;
      left: 0;
      text-align: left;
      font-family: "Open Sans", sans-serif;
    }
    #canvas .title h1, #canvas .title .subtitle {
      margin: 0;
      font-weight: lighter;
      text-anchor: start;
      text-transform: none;
    }
    #canvas .title h1 {
      font-size: 24px;
      color: #4F4F4F;
    }
    #canvas .title .subtitle {
      font-size: 12px;
      color: #AAAAAA;
    }
  </style>
</head>

<body>
<div id="canvas">
  <div class="title">
    <h1>Daily Temperatures in Boston</h1>
    <p class="subtitle">2015</p>
  </div>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/data-set.min.js"></script>
<script src="../build/g2.js"></script>
<script>
  $.getJSON('./data/daily-temp-in-boston.json', data => {
    const ds = new DataSet();
    const dv = ds.createView('test')
      .source(data)
      .transform({
        type: 'map',
        callback(row) { // 加工数据后返回新的一行，默认返回行数据本身
          row.range = [ row.min_temp, row.max_temp ];
          return row;
        }
      });

    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight,
      padding: [ 50, 0, 120 ]
    });

    chart.source(dv, {
      date: {
        type: 'cat'
      },
      range: {
        max: 30,
        min: -25
      },
      mean_temp: {
        alias: 'Average Daily Temperature'
      }
    });
    chart.coord('polar', { innerRadius: 0.35 });
    chart.legend({
      hoverable: false,
      title: {
        fontSize: 12,
        fill: '#4F4F4F',
        fontWeight: 300,
        textAlign: 'start'
      },
      textOffset: 0,
      slidable: false,
      position: 'bottom',
      width: 200, // 连续图例宽度
      height: 8, // 连续图例高度度
      textStyle: {
        textBaseline: 'top',
        textAlign: 'center'
      }
    });
    chart.axis('date', false);
    chart.axis('range', {
      line: null,
      tickLine: null,
      label: null,
      grid: {
        lineStyle: {
          lineDash: [ 0, 0 ],
          stroke: '#E8E8E8',
          lineWidth: 1
        }
      }
    });
    chart.interval().position('date*range')
      .color('mean_temp', 'rgb(44, 123, 182)-rgb(0, 166, 202)-rgb(0, 204, 188)-rgb(144, 235, 157)-rgb(255, 255, 140)-rgb(249, 208, 87)-rgb(242, 158, 46)-rgb(231, 104, 24)-rgb(215, 25, 28)')
      .size(2.5)
      .opacity(1);

    chart.guide().line({
      start: {
        date: '2015-1-1',
        range: -25
      },
      end: {
        date: '2015-1-1',
        range: 35
      },
      lineStyle: {
        stroke: '#aaa',
        lineWidth: 1,
        lineDash: null
      },
      text: {
        position: 0.95,
        autoRotate: false,
        style: {
          fontSize: 16,
          textAlign: 'start',
          fontWeight: 100,
          fill: '#aaa'
        },
        content: 'January',
        offsetX: 10
      }
    });

    const ticks = [ -20, -10, 0, 10, 20, 30 ];
    for (let i = 0; i < ticks.length; i++) {
      chart.guide().text({
        start: {
          date: '2015-7-1',
          range: ticks[i]
        },
        content: ticks[i] + '°C',
        style: {
          fill: '#C4C4C4',
          fontSize: 12,
          fontWeight: 100,
          textAlign: 'center',
          textBaseline: 'middle'
        }
      });
    }

    chart.render();
  });
</script>
</body>

</html>
